<template>
  <div>
    <!-- <div class="pieDom" ></div> -->
    <div class="pieDom" ref="pieChart"></div>
    <div class="search">
      <div class="searchLeft">
        <div class="searchLable">用户id：</div>
        <div>
          <el-input v-model="query.orderNo" placeholder="请输入用户id" class="searchInput" maxlength="100"
            @keyup.enter.native="handleSearch"></el-input>
        </div>

        <div class="searchLable">用户名：</div>
        <div>
          <el-input v-model="query.buyName" placeholder="请输入用户名" class="searchInput" maxlength="100"
            @keyup.enter.native="handleSearch"></el-input>
        </div>

        <div class="searchLable">创建时间：</div>
        <div>
          <el-date-picker v-model="createdTime" type="daterange" format="yy/MM/dd" value-format="yyyy-MM-dd"
            range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"
            prefix-icon="icon_admin icon-gonggongtubiao_riqi" @keyup.enter.native="handleSearch"></el-date-picker>
        </div>
        <div>
          <el-button type="primary" size="small" icon="icon_admin icon-gonggongtubiao_sousuo" @click="handleSearch"
            class="searchBtn">查询</el-button>
        </div>

        <div class="searchLable red" v-show="query.startTime && !data.length">您所选日期内暂无数据，请重新选择！</div>
      </div>
    </div>

    <div class="table-container">
      <el-table :data="data" style="width: 100%" v-loading="loading" element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading" @filter-change="filterChange" class="tableBox"
        @sort-change="sortHandler">
        <el-table-column label="用户id" prop="userId" width="200"></el-table-column>
        <el-table-column label="用户类型" prop="userType" :filters="[
          { text: '运动员', value: 0 },
          { text: '教练', value: 1 },
          { text: '管理员', value: 2 },

        ]" :filter-multiple="false" filter-placement="bottom-end" column-key="userType" width="200">
          <template slot="header">
            <span>用户类型</span>
            <img src="../../../public/img/shaixuan.png" alt class="filter" />
          </template>
          <template slot-scope="scope">
            <span v-if="scope.row.userType == 0">运动员</span>
            <span v-if="scope.row.userType == 1">教练</span>
            <span v-if="scope.row.userType == 2">管理员</span>

          </template>
        </el-table-column>
        <el-table-column label="用户名" width="200" prop="userName" show-overflow-tooltip></el-table-column>


        <el-table-column label="创建时间" prop="userTime" sortable="custom" width="220">
          <template slot-scope="scope">
            <span>{{ scope.row.userTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="status" :filters="[
          { text: '待支付', value: 1 },
          { text: '支付成功', value: 2 },

          { text: '已取消', value: 4 },
        ]" :filter-multiple="false" filter-placement="bottom-end" width="180" column-key="status">
          <template slot="header">
            <span>状态</span>
            <img src="../../../public/img/shaixuan.png" alt class="filter" />
          </template>
          <template slot-scope="scope">
            <span v-if="scope.row.status == '1'" style="color: #FBA73B">待支付</span>
            <span v-if="scope.row.status == '2'" style="color: #49C37A">支付成功</span>
            <span v-if="scope.row.status == '3'" style="color: #E74550">支付失败</span>
            <span v-if="scope.row.status == '4'">已取消</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="goDetails(scope.row)">详情</el-button>
            <el-button type="primary" size="mini" @click="getPay(scope.row)" v-if="
              (scope.row.status == '1' || scope.row.status == '3') &&
              scope.row.paymentType != 4
            ">支付确认</el-button>
            <el-button type="primary" size="mini" @click="getAccounts(scope.row)"
              v-if="scope.row.status == '1' && scope.row.paymentType == 4">转账确认</el-button>
            <el-button type="primary" size="mini" @click="getAccountsInfo(scope.row)"
              v-if="scope.row.paymentType == 4 && scope.row.status == '2'">转账信息</el-button>
          </template>
        </el-table-column>
        <template slot="empty" v-if="!data.length">
          <div style="
                height: 500px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
              ">
            <i class="icon_admin icon-gonggongtubiao_konghezi"></i>
            <div style="font-size: 14px" v-show="searchKey == 0">空空如也 ~</div>
            <div style="font-size: 14px" v-show="searchKey == 1">查询无数据，请重新输入查询条件</div>
          </div>
        </template>
      </el-table>
    </div>

    <div class="foot">
      <div class="pagination-container">
        <el-pagination background v-show="data.length" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" layout="total,prev, pager, next, sizes,jumper" :page-size="page.size"
          :page-sizes="[10, 50, 100]" :current-page.sync="page.current" :total="total"></el-pagination>
      </div>
    </div>

    <!-- 转账确认 -->
    <el-dialog width="400px" :visible.sync="isAccounts" title="转账确认：" append-to-body
      class="order_title dialog_post dialog_close">
      <el-form label-width="120px">
        <div class="signfor_bg">
          <i class="el-icon-warning-outline" style="
                font-size: 15px;
                vertical-align: middle;
                margin: -1px 10px 0 20px;
              "></i>
          <span>请核对以下汇款信息，如已收到请确认</span>
        </div>
        <el-form label-width="120px">
          <el-form-item label="汇款底单：">
            <el-image fit="cover" :src="orderInfo.filrUrl" class="order_img"
              :preview-src-list="[orderInfo.filrUrl]"></el-image>
          </el-form-item>
          <el-form-item label="流水号：">
            <span>{{ orderInfo.bankSerialNumber }}</span>
          </el-form-item>
          <el-form-item label="汇款人：">
            <span>{{ orderInfo.remitter }}</span>
          </el-form-item>
          <el-form-item label="汇款银行账号：">
            <span>{{ orderInfo.remittancesAccount }}</span>
          </el-form-item>

          <el-form-item label="汇款时间：">
            <span>{{ orderInfo.remittanceTime }}</span>
          </el-form-item>
        </el-form>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isAccounts = false" size="small">取消</el-button>
        <el-button type="primary" @click="getNotarization" size="small">确定</el-button>
      </div>
    </el-dialog>

    <!-- 转账信息 -->
    <el-dialog width="400px" :visible.sync="isAccountsInfo" title="转账信息：" append-to-body
      class="order_title dialog_post dialog_close">
      <el-form label-width="120px">
        <el-form-item label="汇款底单：">
          <el-image fit="cover" :src="orderInfo.filrUrl" class="order_img"
            :preview-src-list="[orderInfo.filrUrl]"></el-image>
        </el-form-item>
        <el-form-item label="流水号：">
          <span>{{ orderInfo.bankSerialNumber }}</span>
        </el-form-item>
        <el-form-item label="汇款人：">
          <span>{{ orderInfo.remitter }}</span>
        </el-form-item>
        <el-form-item label="汇款银行账号：">
          <span>{{ orderInfo.remittancesAccount }}</span>
        </el-form-item>


      </el-form>
    </el-dialog>
  </div>
</template>
<script>
// import {
//   orderList,
//   orderConfirm,
//   orderremittance,
//   orderAffirm
// } from "@/api/user/operator";
import { deepClone } from "@/utils/util";


export default {
  data() {
    return {
      imgUrl: "/img/home/ceshi.jpg",
      query: {
        paymentType: "",
        orderType: "",
        status: ""
      },
      loading: false,
      searchKey: 0,
      isAccounts: false,
      isAccountsInfo: false,
      createdTime: [],
      page: {
        size: 10,
        current: 1
      },
      total: 0,
      data: [{ userId: "24", userType: 0, userName: "admin" }, {

      }],
      orderInfo: {},
      pickerMinDate: "",
      pickerOptions: {
        onPick: obj => {
          this.pickerMinDate = new Date(obj.minDate).getTime();
        },
        disabledDate: time => {
          if (this.pickerMinDate) {
            const day1 = 366 * 24 * 3600 * 1000;
            let maxTime = this.pickerMinDate + day1;
            let minTime = this.pickerMinDate - day1;
            return time.getTime() > maxTime || time.getTime() < minTime;
          } else {
            return "";
          }
        }
      }
    };
  },
  created() {
    // this.onload(this.page, this.query);

  },

  mounted() {
    this.initPieChart();
  },
  methods: {

    initPieChart() {

      let myChart = this.$echarts.init(this.$refs['pieChart'])
      var option = {
        title: {
          text: '训练中心人员数据',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 2, name: '管理员数' },
              { value: 1, name: '教练数' },
              { value: 32, name: '运动员数' },
            ]
          }
        ]
      }
      myChart.resize();

      // 绘制图表
      myChart.setOption(option, true);

      // 图表自适应
      let that = this;
      window.addEventListener("resize", function () {
        myChart.resize();
      });

    },

    onload(page, query) {
      this.loading = true;
      if (this.createdTime) {
        this.query.startTime = this.createdTime[0];
        this.query.endTime = this.createdTime[1];
      } else {
        this.query.startTime = "";
        this.query.endTime = "";
      }
      let params = Object.assign(page, query);
      // orderList(params).then(res => {
      //   let data = res.data.data;
      //   this.data = data.records;
      //   this.total = data.total;
      //   this.loading = false;
      // });

      this.total = 5;
      this.loading = false;
      this.drawPie();
    },
    //分页
    handleCurrentChange(val) {
      this.page.current = val;
      this.onload(this.page, this.query);
    },
    handleSizeChange(val) {
      this.page.size = val;
      this.onload(this.page, this.query);
    },

    //筛选
    filterChange(filters) {
      this.page.current = 1;
      if (filters.status) {
        this.query.status = filters.status[0];
      } else if (filters.paymentType) {
        this.query.paymentType = filters.paymentType[0];
      } else if (filters.orderType) {
        this.query.orderType = filters.orderType[0];
      }
      this.onload(this.page, this.query);
    },

    sortHandler(e) {
      this.query.dateOrder = 0;
      console.log(e);
      if (e.order == "ascending") {
        if (e.prop == "userTime") {
          this.query.dateOrder = 1;
        }
      } else if (e.order == "descending") {
        this.query.dateOrder = 0;
      }
      this.onload(this.page, this.query);
    },

    //查询
    handleSearch() {
      this.excel = deepClone(this.query);
      if (this.startTime) {
        this.excel.startTime = this.startTime[0];
        this.excel.endTime = this.startTime[1];
      } else {
        this.excel.startTime = "";
        this.excel.endTime = "";
      }
      this.searchKey = 1;
      this.page.current = 1;
      this.onload(this.page, this.query);
    },








    drawPie() {
      debugger;
      // 初始化echarts实例
      this.pieChart = this.$echarts.init(this.$refs);
      this.pieChart.resize();

      // 绘制图表
      this.pieChart.setOption(option, true);

      // 图表自适应
      let that = this;
      window.addEventListener("resize", function () {
        that.pieChart.resize();
      });
    },

    //取消订单
    cancel() {
      this.$confirm("您要在取消该订单？", "提示：", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        showClose: false
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "取消成功!"
          });
        })
        .catch(() => { });
    },

    //支付
    getPay(row) {
      this.$confirm("您选中的订单已支付？", "提示：", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        showClose: false
      })
        .then(() => {
          let params = {
            id: row.id
          };
          orderConfirm(params).then(res => {
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: "支付成功!"
              });
            }
            this.onload(this.page, this.query);
          });
        })
        .catch(() => { });
    },

    //转账确认
    getAccounts(row) {
      let params = {
        orderId: row.id
      };
      orderremittance(params).then(res => {
        if (res.data.code == 200) {
          this.isAccounts = true;
          this.orderInfo = res.data.data;
        }
      });
    },

    getNotarization() {
      let params = {
        orderId: this.orderInfo.orderId
      };
      orderAffirm(params).then(res => {
        if (res.data.code == 200) {
          this.$message({
            type: "success",
            message: "确认已支付"
          });
          this.isAccounts = false;
        }
        this.onload(this.page, this.query);
      });
    },

    //转账信息
    getAccountsInfo(row) {
      this.isAccountsInfo = true;
      let params = {
        orderId: row.id
      };
      orderremittance(params).then(res => {
        this.orderInfo = res.data.data;
        console.log(res);
      });
    },

    //详情
    goDetails(row) {
      this.$router.push({
        path: "/admin/details",
        query: {
          id: row.id
        }
      });
    }
  }
};
</script>
<style lang="scss">
.order_title {
  .signfor_bg {
    background-color: #fff6eb;
    width: 400px;
    height: 25px;
    margin: -26px 0 10px -30px;
    line-height: 25px;
    color: #fba73b;
    font-size: 12px;
    text-align: left;
  }

  .dialog-title {
    font-size: 16px;
    padding: 0 30px;
  }

  .el-form-item {
    margin-bottom: 0px !important;
  }
}

.order_img {
  width: 61px;
  height: 61px;
}




.lineType {
  height: 30px;
  margin: 2px 0px 0 0px;
  padding-top: 16px;
  padding-left: 80px;
  background-color: #fff;
}

.pieDom {
  height: 223px;
  background-color: #fff;
}
</style>